<template>
  <div class="app-container documentation-container">

      <div>
            <p>1.HTML5常用的语义化标签以及使用它们的优点</p>
            <p style="padding-left:15px;padding-bottom:10px">  代码结构清晰，方便阅读，有利于团队合作开发。
                 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
                  有利于搜索引擎优化（SEO）。
           </p>
      </div>
      <div style="padding-left:0px;padding-bottom:15px">
             2. padding(对内)  margin(对外)  vw(相对于视口及设备的宽度) 百分比(相对于父元素)
      </div>

      <div style="padding-left:0px;padding-bottom:15px">
             3.如何让谷歌支持小字体  scale(放大缩小)
      </div>

      <div style="padding-left:0px;padding-bottom:10px">
             4.行内元素不换行  行内元素不设置大小  大小有内容决定  块及元素独立占一行  元素有继承关系
      </div>  

      <div>
             <p>5.两种盒子模型</p>
             <p style="padding-left:15px">
                w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，
                 即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
            </p>
             <p style="padding-left:15px">  
               IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，
               即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。
             </p>
      </div> 

     

      <div>
            <p>6.display:none与block测试</p>
            <p v-if="showStatus">display测试 </p>
            <p > 
                <el-button @click="enterClickFm"> 点击切换</el-button>
           </p>
             <p> 使用visibility:hidden比display:none性能上要好，display:none切换显示时
             页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流 ）
              而visibility切换是否显示时则不会引起回流。
            </p>
               <p>那为啥vue中不使用visibility:hidden替代 display:none  个人感觉应该还是页面的美感上考虑的 
                  页面总有一块地方站着地方但是却不显示内容 显得不好看
               </p>
        </div>   

        <!-- <div>
              <div v-for="item in articleList" :key="item.id">
                 {{  item.name}}
              </div>
              <el-button @click="addClickFm">  添加一个元素    </el-button>
        </div> -->

         <div style="padding-left:0px;padding-bottom:15px">
             7.cookie的特点：
                 保存到客户端，容易被篡改(删除、禁用)
                  保存的数据量有限的
                  简单易懂好用
              cookie的缺点：
                  保存在客户端，容易被篡改。
                  大小受限，本身最大4kb。
        </div>  

        <div style="padding-left:0px;padding-bottom:15px">  8.session原理
                  当客户端第一次请求服务器的时候，服务器生成一份session保存在服务端，
                   将该数据(session)的id以cookie的形式传递给客户端；以后的每次请求，
                   浏览器都会自动的携带cookie来访问服务器(session数据id)。
        </div>


        <div style="padding-left:0px;padding-bottom:15px">  
               <p> 
                     cookie和session的共同点
                     cookie和session都是用来跟踪浏览器用户身份的会话方式。
                  
               </p>
               <p> 
                     cookie和session区别
                      cookie是保存在客户端的

                      cookie有大小限制

                      session是保存在服务器端

                      session更加安全

                      session会比较占用服务器性能，当访问增多时应用cookie

               </p>
            
        </div>

        <div style="padding-left:0px;padding-bottom:15px">
                9. localStorage  采用的编码是UTF-16  DOMstring     5M  单位是字符串的长度 而不是字符数
                  localStorage  键占存贮空间      localStorage  键的数量对读写性能影响不大  但值影响大  不建议保存大的数据
        </div>

         <div style="padding-left:0px;padding-bottom:15px">
                10. localStorage  采用的编码是UTF-16  DOMstring     5M  单位是字符串的长度 而不是字符数
                  localStorage  键占存贮空间      localStorage  键的数量对读写性能影响不大  但值影响大  不建议保存大的数据
        </div>

        <div>
                11.localStorage和sessionStorage的区别
           <p style="padding-left:15px">  1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 </p>

            <p style="padding-left:15px">  2、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。  </p>


            <p style="padding-left:15px">  4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。  </p>


            <p style="padding-left:15px">  5、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的
               localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，
               页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
           </p>


        </div>
 
         <div style="padding-left:0px;padding-bottom:15px">
              12.cookie和localStorage都有跨域的问题
        </div>

        <div style="padding-left:0px;padding-bottom:15px">
              13  Blob是一种二进制对象(包括字符，文件等等)，es6对其进行了补充  <br />
                  File是基于Blob的一种二进制文件对象,扩展了Blob，es6同样进行了补充 <br />
                   ArrayBuffer是ES6新引入的二进制缓冲区 <br />
                   Buffer是Nodejs内置的二进制缓冲区，Buffer相当于ES6中Uint8Array(属于TypedArray)的一种 <br />
        </div>
        <div style="padding-left:0px;padding-bottom:15px">
              14.Blob 分片
                  除了使用Blob()构造函数来创建blob 对象之外，还可以从 blob 对象中创建blob，
                  也就是将 blob 对象切片。Blob 对象内置了 slice() 方法用来将 blob 对象分片
        </div>

          <div style="padding-left:0px;padding-bottom:15px">
              15.  不定宽高元素的居住 
                 绝对定位 + transform 以及flex
          </div>

          <div style="padding-left:0px;padding-bottom:15px">
              16.   md5加密出来有多少位
               MD5加密后的位数一般为两种，16 位与 32 位。16 位实际上是从 32 位字符串中，取中间的第 9 位到第 24位的部分，
          </div>

           <div style="padding-left:0px;padding-bottom:15px">
              17.BFC
              <p style="padding-left:15px">  BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，
                只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干 </p>
               <p style="padding-left:15px">  
                      BFC的布局规则
                          1、内部的Box会在垂直方向，一个接一个地放置。 <br />

                          2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） <br />

                          3、每个元素的margin box的左边， 与包含块border box的左边相接触 <br />

                          4、BFC的区域不会与float box重叠。 <br />

                          5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 <br />

                          6、计算BFC的高度时，浮动元素也参与计算 <br />

                  </p>
                  <p style="padding-left:15px"> 哪些元素或属性能触发BFC   <br />
                        1、根元素(html)   <br />
                        2、float属性不为none    <br />
                        3、position为absolute或fixed    <br />
                        4、display为inline-block, table-cell, table-caption, flex, inline-flex   <br />
                        5、overflow不为visible   <br />
                  </p>

                  <p style="padding-left:15px"> 
                       BFC的应用   <br />
                              1、自适应两栏布局   <br />
                              2、清除内部浮动    <br />
                              3、防止margin上下重叠
                  </p>



            </div>

          <div style="padding-left:0px;padding-bottom:15px">
                    18.关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
          </div>
           <div style="padding-left:0px;padding-bottom:15px">
                    19. 强缓存和协商缓存怎么区分的  <br />
                      当浏览器再次访问一个已经访问过的资源时，它会这样做： <br />
                      1.看看是否命中强缓存，如果命中，就直接使用缓存了。 <br />
                      2.如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。 <br />
                      3.如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。 <br />
                      4.否则，返回最新的资源。
          </div>  

           <div style="padding-left:0px;padding-bottom:15px">
                    19. 302重定向  304是协商缓存 后端数据没有变化
          </div> 

           <div style="padding-left:0px;padding-bottom:15px">
                    20.伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里  <br />
                     伪元素(after before)的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；<br />
                     而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。(a hover等)  <br />
          </div>   
          <div style="padding-left:0px;padding-bottom:15px">
                    21.  uni-app的存储方案比5+app要少，因为cookie、localstorage、sessionstorage、websql、indexedDB只有h5端支持，其他端都不支持。
                         uni.storage的键值对存储，这个是全端支持的。   <br />
                         uni-app的Storage在不同端的实现不同，uni.storage在app侧，映射为plus.storage；h5侧映射为localstorage；   <br />
                         各个小程序平台映射为其自带的storage键值对存储：   <br />

                      H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理   <br />
                      App端为原生的plus.storage，无大小限制，不是缓存，持久化   <br />
                      各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。 <br />
                      微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。  <br />
                      支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。  <br />
                      百度、头条小程序文档未说明大小限制   <br />

                      在3大主流渲染引擎里，webview、react native/weex、flutter，复杂度依次降低，渲染性能依次上升。   <br />
                      （uni-app是双渲染引擎，webview和weex都内置了，随便开发者使用切换）   <br />
          </div>     
          <div style="padding-left:0px;padding-bottom:15px">
                    22.  jpg不支持透明 png支持透明
          </div> 

           <div style="padding-left:0px;padding-bottom:15px">
                    23.  画三角形   <br />
                         设置border属性，长度宽度定义为0， 想要那个方向的三角形（上 右 下 左），就把其他方向的三角形颜色设置为 transparent   <br />
                          这只是其中的一种方法   <br />
                       https://huaweicloud.csdn.net/638edf70dacf622b8df8d175.html?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Eactivity-1-115663156-blog-124413951.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Eactivity-1-115663156-blog-124413951.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=1  
          </div>

          <div style="padding-left:0px;padding-bottom:15px">
                    24.常见的CSS3 属性   <br />
                        部分例子： translate( x , y )、box-sizing、box-shadow、text-shadow、border-radius、border-image、background-size   <br />
          </div>
           <div style="padding-left:0px;padding-bottom:15px">
                    25.css 会造成dom渲染阻塞 不会造成dom树构建  
                       会阻塞js加载  GUI线程和js引擎互斥关系 js引擎在后  
          </div> 

            



  </div>
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'

export default {
  name: 'Documentation',
  components: { DropdownMenu },
  data() {
    return {
      articleList: [
         {
           id:"1",
           name:"xiaoming"
         },
          {
           id:"2",
           name:"xiaohong"
         }, {
           id:"3",
           name:"xiaoqiang"
         }
      ],
      showStatus:true,
    }
  },
  mounted(){
    sessionStorage.setItem('myname','王大仙');
    let dataOne={
         a:1,
         b:{
              a:10
         },
         cc:undefined,
         dd:null,
         ee:function(){

         }

    }
    let dataTwo=JSON.parse( JSON.stringify( dataOne ) )
    //  console.log( 'eeeeeeeee' )
    //  console.log( dataTwo )
    //  console.log( 'eeeeeeeee' )
  },
  methods:{
       enterClickFm(){
          this.showStatus=!this.showStatus
       },
      //虚拟DOM 
      //  addClickFm(){
      //      this.articleList.unshift({
      //           id:"4",
      //           name:"xiaolong"
      //      })
      //  }


  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  margin: 0px;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-start;

}
</style>
